import type { IGroup, IFrame } from 'leafer-ui'
import { Frame, Group, Text } from 'leafer-ui'
import type { ICanvas, IGrid, IText } from 'src/interfaces/IBook'

export class BasePuzzleUtil {
  // 外部初始化的类型变量
  canvas: ICanvas

  title_model: IText
  instruction_model: IText

  word_list: string[]
  words_grid_style: IGrid

  // 内部私有类型变量
  protected answer_frame: IFrame
  protected topic_frame: IFrame

  protected title_group: IGroup
  protected ans_words_group: IGroup
  protected topic_words_group: IGroup

  protected white_border: number = 0 // 上下左右的留白6

  /**
   * @description: 创建双重拼图
   * @param {ICanvas} canvas: 画布设置
   * @param {IText} title_model: 标题文字实体
   * @param {IText} instruction_model: 副标题文字实体
   * @param {string} word_list: 拼图的单词列表
   * @param {IGrid} words_grid_style: box框的样式
   * @return {*}:
   */
  constructor(
    canvas: ICanvas,
    title_model: IText,
    instruction_model: IText,
    word_list: string[],
    words_grid_style: IGrid
  ) {
    this.canvas = canvas
    this.title_model = title_model
    this.instruction_model = instruction_model
    this.word_list = word_list
    this.words_grid_style = words_grid_style

    // 初始化 画布
    this.topic_frame = this.create_frame(canvas.width, canvas.height, 0, 0)
    this.answer_frame = this.create_frame(
      canvas.width,
      canvas.height,
      canvas.width + 200,
      0
    )
    // 创建 TItle Groud
    this.title_group = new Group({
      x: 0,
      y: 0,
      editable: true,
      fill: '#FEB027',
      hitChildren: false,
    })
    // 创建两个组 便于管理words区域
    this.ans_words_group = new Group({
      x: 0,
      y: 0,
      editable: true,
      fill: '#FEB027',
      hitChildren: false,
    })

    this.topic_words_group = this.ans_words_group.clone() as IGroup
  }

  dram_title = (text_model: IText, instruction_model: IText) => {
    const title = new Text({
      x: 0,
      y: 0,
      height: text_model.font.font_size,
      width: this.canvas.width,
      fontFamily: text_model.font.font_name,
      fontSize: text_model.font.font_size,
      textAlign: text_model.text_align,
      verticalAlign: text_model.vertical_align,
      fill: text_model.font.font_color,
      text: `${text_model.text}`,
    })
    const instruction = new Text({
      x: 0,
      y: text_model.font.font_size + 20,
      fontFamily: instruction_model.font.font_name,
      height: instruction_model.font.font_size,
      width: this.canvas.width,
      fontSize: instruction_model.font.font_size,
      textAlign: instruction_model.text_align,
      verticalAlign: instruction_model.vertical_align,
      fill: instruction_model.font.font_color,
      text: `${instruction_model.text}`,
    })
    this.title_group.add([title, instruction])
  }

  /**
   * @description: 创建画布
   * @param {number} width: 画布宽度
   * @param {number} height: 画布高度
   * @param {number} x: 画布坐标位置
   * @param {number} y: 画布y轴坐标位置
   * @return {*}: Frame对象
   */
  create_frame(width: number, height: number, x: number, y: number): Frame {
    const frame = new Frame({
      width: width,
      height: height,
      x: x,
      y: y,
    })
    return frame
  }

  get_answer_frame() {
    return this.answer_frame
  }
  get_topic_frame() {
    return this.topic_frame
  }

  x_center_position(width: number, canvas_w: number) {
    const x = canvas_w / 2 - width / 2
    return x
  }
}
